<template>
    <a-card class="card" :bordered="false">
        <div class="manage-template">
                <div class="manage-template-content">
                    <div class="receipt-template">
                        
                                    <h3>默认模板</h3>
                        <p>
                            <input type="radio" name="default" id="default-template41" value="41" checked="">
                            <label for="default-template41" class="default default-template41">已使用当前模板</label>
                        </p>
                        <div class="template-wrapper">
                            <a href="/lllw/bill_template/edit/id/41.html" class="edit-template-btn"></a>
                                                 
                            <div class="template-left"></div>
                            <div class="template-inner">
                                                                        <dl class="template-number" style="top: 23px; left: 588px; width:150px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>票据号：</dt>
                                            <dd></dd>
                                        </dl>
                                                                            <dl class="template-date" style="top: 50px; left: 0px; width:130px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>日期：</dt>
                                            <dd></dd>
                                        </dl>
                                                                            <dl class="template-title" style="top: 19px; left: 10px; width:588px; height: 20px;is_bold:1;font-size: 18px;text-align: center">
                                            <dt></dt>
                                            <dd data-value="">下洲花园收款票据</dd>
                                        </dl>
                                                                            <dl class="template-house" style="top: 50px; left: 216px; width:130px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>房屋：</dt>
                                            <dd></dd>
                                        </dl>
                                                                            <dl class="template-owner" style="top: 50px; left: 408px; width:330px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>业主姓名：</dt>
                                            <dd></dd>
                                        </dl>
                                                                            <dl class="template-receiver" style="top: 190px; left: 362px; width:130px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>收款人：</dt>
                                            <dd></dd>
                                        </dl>
                                                                            <dl class="template-type" style="top: 190px; left: 556px; width:130px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>收款方式：</dt>
                                            <dd></dd>
                                        </dl>
                                                                            <dl class="template-seal" style="top: 190px; left: 0px; width:130px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>单位印章：</dt>
                                            <dd></dd>
                                        </dl>
                                                                            <dl class="template-account" style="top:190px;left:188px; width:130px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>出纳：</dt>
                                            <dd></dd>
                                        </dl>
                                                                            <dl class="template-remarks" style="top: 207px; left: 0px; width:130px; height: 14px;is_bold:2;font-size: 12px">
                                            <dt>备注：</dt>
                                            <dd></dd>
                                        </dl>
                                                                    
                                <table cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>收费项目</th>
                                            <th>交款区间</th>
                                            <th>缴费单价（元）</th>
                                            <th>金额</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>物业费</td>
                                            <td>2018.02.06-2019.04.06</td>
                                            <td>1.2元/月/平方</td>
                                            <td>¥276.00</td>
                                        </tr>
                                        <tr>
                                            <td>物业费</td>
                                            <td>2018.02.06-2019.04.06</td>
                                            <td>1.2元/月/平方</td>
                                            <td>¥276.00</td>
                                        </tr>
                                        <tr>
                                             <td>合计</td>
                                            <td colspan="2">伍佰伍拾贰元整</td>
                                            <td>¥552.00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="template-right"></div>
                        </div>
                                                <a href="/lllw/bill_template/add.html" class="lou-btn">新增票据</a>
                    </div>
                    <div class="refund-template">
                        <h3>退款默认票据</h3>
                        <p>
                            <input type="radio" id="default-template">
                            <label for="default-template">设为使用模板</label>
                        </p>
                        <div class="template-wrapper">
                            <a href="javascript:;" class="edit-template-btn"></a>
                            <a href="javascript:;" class="delete-template-btn"></a>
                            <div class="template-left"></div>
                            <div class="template-inner">
                                <dl class="template-title" style="top: 19px; left: 290px; width: 144px; height: 20px;">
                                    <dt></dt>
                                    <dd data-value="高新慧园缴费票据">高新慧园缴费票据</dd>
                                </dl>
                                <dl class="template-number" style="top: 23px; left: 560px; width: 130px; height: 14px;">
                                    <dt>票据号：</dt>
                                    <dd>XCGA001267</dd>
                                </dl>
                                <dl class="template-date" style="top: 50px; left: 0; width: 130px; height: 14px;">
                                    <dt>日期：</dt>
                                    <dd>2019年01月04日</dd>
                                </dl>
                                <dl class="template-house" style="top: 50px; left: 216px; width: 130px; height: 14px;">
                                    <dt>房屋：</dt>
                                    <dd>1栋-1单元-303</dd>
                                </dl>
                                <dl class="template-owner" style="top: 50px; left: 408px; width: 130px; height: 14px;">
                                    <dt>业主姓名：</dt>
                                    <dd>阳东升 王江桂</dd>
                                </dl>
                                <dl class="template-seal" style="top: 190px; left: 0; width: 130px; height: 14px;">
                                    <dt>单位印章：</dt>
                                    <dd></dd>
                                </dl>
                                <dl class="template-account" style="top: 190px; left: 188px; width: 130px; height: 14px;">
                                    <dt>出纳：</dt>
                                    <dd>王宇</dd>
                                </dl>
                                <dl class="template-receiver" style="top: 190px; left: 362px; width: 130px; height: 14px;">
                                    <dt>收款人：</dt>
                                    <dd>杨正亚</dd>
                                </dl>
                                <dl class="template-type" style="top: 190px; left: 556px; width: 130px; height: 14px;">
                                    <dt>收款方式：</dt>
                                    <dd>现金</dd>
                                </dl>
                                <dl class="template-remarks" style="top: 210px; left: 0px; width: 130px; height: 14px;">
                                    <dt>备注：</dt>
                                    <dd></dd>
                                </dl>
                                <table cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>收费项目</th>
                                            <th>交款区间</th>
                                            <th>缴费单价（元）</th>
                                            <th>金额</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>物业费</td>
                                            <td>2018.02.06-2019.04.06</td>
                                            <td>1.2元/月/平方</td>
                                            <td>¥276.00</td>
                                        </tr>
                                        <tr>
                                            <td>物业费</td>
                                            <td>2018.02.06-2019.04.06</td>
                                            <td>1.2元/月/平方</td>
                                            <td>¥276.00</td>
                                        </tr>
                                        <tr>
                                            <td>物业费</td>
                                            <td>2018.02.06-2019.04.06</td>
                                            <td>1.2元/月/平方</td>
                                            <td>¥276.00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="template-right"></div>
                        </div>
                        <h3>收款票据二</h3>
                        <a href="/lllw/bill_template/add.html" class="lou-btn">新增票据</a>
                    </div>
                </div>
            </div>
    </a-card>
</template>
<script>
export default {
    name:'fee_template',

}
</script>
<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .manage-template {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.manage-template .edit-template-table {
    position: absolute;
    top: 570px;
    left: 20px;
    right: 20px;
    bottom: 0;
    overflow-x: auto;
}

.manage-template .edit-table-header {
    position: absolute;
    top: 530px;
    left: 20px;
    right: 20px;
}

.manage-template .edit-table-header th {
    height: 40px;
    background-color: #f8f7fa;
    color: #8c8b93;
    font-weight: normal;
}

.manage-template .edit-template-table table td {
    text-align: center;
    height: 50px;
    border-bottom: 1px solid #e5e1ec;
}

.manage-template .edit-template-table table td a.delete-btn {
    display: inline-block;
    width: 50px;
    height: 22px;
    line-height: 22px;
    background-color: #e24d4d;
    border-radius: 2px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #ffffff;
}

.manage-template .edit-template-table table td input {
    width: 80%;
    height: 26px;
    text-align: center;
}

.manage-template .edit-template-table table td select {
    width: 46px;
    height: 26px;
    border: solid 1px #e4e4e4;
}

.manage-template header {
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
}

.manage-template .manage-template-tab {
    padding: 24px 0;
    font-size: 0;
    border-top: 1px solid #e6e6e6;
}

.manage-template .manage-template-content {
    height: 100%;
    overflow-y: auto;
}

.manage-template .manage-template-tab a {
    font-size: 14px;
    color: #787878;
    letter-spacing: 2px;
    border: solid 1px #ffaf14;
    background-color: #fff;
}

.manage-template .manage-template-tab a:last-child {
    border-left: 0;
}

.manage-template .manage-template-tab a.active {
    background-color: #ffaf14;
    color: #513500;
}

.manage-template .manage-template-content h3 {
    margin-bottom: 24px;
    font-family: MicrosoftYaHei-Bold;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.manage-template .manage-template-content p {
    margin: 24px 0;
    position: relative;
}

.manage-template .manage-template-content p input {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

.manage-template .manage-template-content p input:checked+label {
    background-image: url(../../assets/images/checked-radio.png);
}

.manage-template .manage-template-content p label {
    padding-left: 22px;
    background-repeat: no-repeat;
    background-image: url(../../assets/images/unchecked-radio.png);
    background-position: left center;
    cursor: pointer;
}

.manage-template .manage-template-content dl.edit-template-name {
    padding-bottom: 24px;
    display: flex;
}

.manage-template .manage-template-content dl.edit-template-name dt {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.manage-template .manage-template-content dl.edit-template-name dd input {
    padding: 0 10px;
    width: 211px;
    height: 36px;
    background-color: #fcfcfc;
    border-radius: 2px 0px 0px 2px;
    border: solid 1px #e5e1ec;
}

.manage-template .manage-template-content .lou-btn {
    font-size: 14px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

.manage-template .manage-template-content .lou-btn.add-new-editrow {
    padding-left: 28px;
    text-align: left;
    background-image: url(/images/charge-add-ico.png);
}

.manage-template .manage-template-content .refund-template {
    display: none;
}

.manage-template .template-wrapper {
    position: relative;
    display: flex;
    margin-bottom: 24px;
    padding: 0 16px;
    width: 908px;
    box-shadow: 0px 7px 16px 0px rgba(171, 171, 171, 0.23);
    border-radius: 4px;
    border: solid 1px #e6e6e6;
}

.manage-template .template-wrapper .edit-template-btn, .manage-template .template-wrapper .delete-template-btn {
    position: absolute;
    right: 29px;
    top: -20px;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-image: url(../../assets/images/edit-template.png);
}

.manage-template .refund-template .template-wrapper .edit-template-btn {
    right: 78px;
}

.manage-template .refund-template .template-wrapper .delete-template-btn, .manage-template .template-wrapper .delete-template-btn {
    background-image: url(../../assets/images/delete-template.png);
}

.manage-template .template-wrapper .relate-a-pos, .manage-template .template-wrapper .relate-b-pos {
    position: absolute;
    left: 74px;
    top: -10px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(../../assets/images/point-a.png);
    z-index: 990;
}

.manage-template .template-wrapper .relate-b-pos {
    top: 163px;
    background-image: url(../../assets/images/point-b.png);
}

.manage-template .template-wrapper .template-left {
    margin-right: 34px;
    width: 34px;
    background-image: url(../../assets/images/left-template-line.png);
    background-position: left 15px;
}

.manage-template .template-wrapper .template-right {
    margin-left: 34px;
    width: 34px;
    background-image: url(../../assets/images/right-template-line.png);
    background-position: left 15px;
}

.manage-template .template-wrapper .template-inner {
    flex: 1;
    position: relative;
    padding: 73px 0;
    overflow: block;
}

.manage-template .template-wrapper .template-inner dl.template-title dt, .manage-template .template-wrapper .template-inner dl.template-title dd {
    font-family: MicrosoftYaHei-Bold;
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
}

.manage-template .template-wrapper .template-inner dl {
    position: absolute;
    display: flex;
    overflow: hidden;
}

.manage-template .template-wrapper .template-inner dt, .manage-template .template-wrapper .template-inner dd {
    font-size: 12px;
    word-break: break-all;
}

.manage-template .template-wrapper .template-inner dd {
    flex: 1;
}

.manage-template .template-wrapper .template-inner table {
    width: 100%;
}

.manage-template .template-wrapper .template-inner table tr td, .manage-template .template-wrapper .template-inner table tr th {
    height: 26px;
    text-align: center;
    border-top: solid 1px #000000;
    border-left: solid 1px #000000;
}

.manage-template .template-wrapper .template-inner table tr td:last-child, .manage-template .template-wrapper .template-inner table tr th:last-child {
    border-right: solid 1px #000000;
}

.manage-template .template-wrapper .template-inner table tr:last-child td {
    border-bottom: solid 1px #000000;
}

.template-mask {
    padding: 0 30px 22px;
    width: 388px;
}

.template-mask header {
    padding-top: 130px;
    height: auto;
    line-height: normal;
    text-align: center;
    border-bottom: none;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-image: url(../../assets/images/mask-delete-btn.png);
    background-position: center top 34px;
}

.template-mask section p {
    margin-top: 13px;
    text-align: center;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #787878;
}

.template-mask footer {
    margin-top: 25px;
}

.footer-cont .bt {
    text-align: center;
    display: inline-block;
}
.footer-cont .btl{
    margin-left: 10px;
}

.footer-cont select {
    width: 150px;
    height: 26px;
    border: solid 1px #e4e4e4;
}

.footer-cont input {
    width: 150px;
    height: 26px;
    border: solid 1px #e4e4e4;
}

.footer-cont .comu {
    margin-left: -40px;
    margin-right: 20px;
}

.footer-cont .mar-lef {
    margin-left: 20px;
    margin-right: 10px;
}

.footer-cont .width_set {
    width: 100px;
    padding: 0 38px 0 10px;
}
</style>